<template>
  <!--重点产品现状分析功能-->
  <div class="index-mining">
    <div class="leftBox">
      <container-block @handleClick="handleClick" class="agriculture" chartID="chart1" title="重庆市主要农产品" chartType="getStackBar" height="calc(100vh - 60px)">
        <template>
          <div class="agriculture-list">
            <div class="list-item" @click="showDetail(item, index)" v-for="(item,index) in agricultureList" :key="index">
              <div>
                <img :src="getImgUrl(item.icon)" alt="">
                <span>{{ item.name }}</span>
              </div>
              <img class="is-checked" :src="index + 1 === ind ? getImgUrl(item.checked) : getImgUrl(item.noChecked)" alt="">
            </div>
          </div>
        </template>
      </container-block>
    </div>
    <div class="content">
      <child-index v-if="!ind" @getCurYear="getCurYear"></child-index>
      <child-item v-if="ind" :itemCode="itemCode" :curYear="curYear"></child-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "index-mining",
  components: {
    ChildIndex: () => import('./child/index'),
    ChildItem: () => import('./child/list-item'),
    ContainerBlock: () => import('@/components/container-block'),
  },
  props: {},
  data() {
    return {
      ind: '',
      agricultureList: [
        {name: '粮食', id: '', icon: 'liangshi.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '油料', id: '', icon: 'youliao.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '麻类', id: '', icon: 'malei.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '甘蔗', id: '', icon: 'ganzhe.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '烟叶', id: '', icon: 'yanye.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '蔬菜', id: '', icon: 'shucai.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '茶叶', id: '', icon: 'cha.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '蚕茧', id: '', icon: 'chanjian.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '水果', id: '', icon: 'shuiguo.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '禽蛋', id: '', icon: 'qindan.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '水产品', id: '', icon: 'shuichanpin.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
        {name: '猪肉', id: '', icon: 'zhurou.png', noChecked: 'noChecked.png', checked: 'Checked.png'},
      ],
      itemCode: '',
      curYear: this.getLastYear()-1,
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    this.ind = '';
  },
  methods: {
    getLastYear(){
      let myDate = new Date();
      let year =  myDate.getFullYear()-1;
      return year;
    },
    getCurYear(val) {
      this.curYear = val;
    },
    getImgUrl(icon) {
      return require('../../assets/images/product/' + icon)
    },
    showDetail(item, index) {
      this.ind = index + 1;
      this.itemCode = item.name;
    },
    handleClick() {
      this.ind = ''
    }
  },
  watch: {}
}
</script>

<style scoped lang="scss">

.index-mining {
  width: 100%;
  height: 100%;
  padding: 6vh 1.3vw 1.85vh 1.3vw;

  .leftBox {
    width: 18%;
    height: calc(100vh - 60px);
    float: left;
    background: rgba(0, 75, 90, 0.2);
    border: 1px solid #00BAD8;
    padding: 15px 0;
    .agriculture-list {
      height: calc(100% - 56px);
      padding: 0 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .list-item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
        img {
          width: 18px;
          height: 18px;
        }

        span {
          display: inline-block;
          padding: 0 0 0 10px;
          color: white;
          font-size: 0.94vw;
        }

        img.is-checked {
          width: 12px;
          height: 12px;
        }
      }
    }
  }

  .content {
    width: 80%;
    height: calc(100vh - 60px);
    float: right;
  }
}
</style>
